<%--
  Created by IntelliJ IDEA.
  User: 95126
  Date: 2021/4/29
  Time: 8:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../imgs/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../imgs/css/bootstrap.min.css">
    <link rel="stylesheet" href="../imgs/css/all.min.css">
    <link rel="stylesheet" href="../imgs/css/animate.css">
    <link rel="stylesheet" href="../imgs/css/flaticon.css">
    <link rel="stylesheet" href="../imgs/css/magnific-popup.css">
    <link rel="stylesheet" href="../imgs/css/odometer.css">
    <link rel="stylesheet" href="../imgs/css/owl.carousel.min.css">
    <link rel="stylesheet" href="../imgs/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="../imgs/css/nice-select.css">
    <link rel="stylesheet" href="../imgs/css/main.css">

    <link rel="shortcut icon" href="../imgs/images/favicon.png" type="image/x-icon">

    <title>登录页面</title>
    <style>
        .icon {
            font-family: "iconfont" !important;
            font-size: 35px;
            font-style: normal;
            overflow: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>



</head>

<body>
<!-- ==========Preloader========== -->
<div class="preloader">
    <div class="preloader-inner">
        <div class="preloader-icon">
            <span></span>
            <span></span>
        </div>
    </div>
</div>
<!-- ==========Preloader========== -->

<!-- ==========Sign-In-Section========== -->
<section class="account-section bg_img" data-background="../imgs/images/account/account-bg.jpg">
    <div class="container">
        <div class="padding-top padding-bottom">
            <div class="account-area">
                <div class="section-header-3">
                    <span class="cate">欢迎</span>
                    <h2 class="title">来到博莱特</h2>
                </div>
                <form class="account-form">
                    <div class="form-group">
                        <label for="phone">手机号<span>*</span></label>
                        <input type="text" placeholder="请输入手机号" onblur="check_phone()" id="phone">
                        <span id="p_error"></span>
                    </div>
                    <div class="form-group">
                        <label for="pwd">密码<span>*</span></label>
                        <input type="password" placeholder="请输入密码" id="pwd">
                        <span id="pwd_error"></span>
                    </div>
                    <div class="form-group checkgroup">
                        <input type="checkbox" id="bal2">
                        <label for="bal2">记住密码</label>
<%--                        <a href="#0" class="forget-pass">忘记密码</a>--%>
                    </div>
                    <div class="form-group text-center">
                        <button type="button" id="log_btn" class="btn btn-danger">登录</button>
                    </div>
                </form>
<%--                <div class="form-group text-center">--%>
<%--                    <button type="button" id="alipay-btn" class="btn btn-danger">支付宝登录</button>--%>
<%--                </div>--%>
                <div class="option">
                    没有账户? <a href="${path}/user/register">现在注册</a>
<%--                </div>--%>
<%--                <div class="or"><span>其他登录方式</span></div>--%>
<%--                <ul class="social-icons">--%>
<%--                    <li>--%>
<%--                        <a href="#0">--%>
<%--                            <i class="fab fa-facebook-f"></i>--%>
<%--                        </a>--%>
<%--                    </li>--%>
<%--                    <li>--%>
<%--                        <a href="#0" class="active">--%>
<%--                            <i class="fab fa-twitter"></i>--%>
<%--                        </a>--%>
<%--                    </li>--%>
<%--                    <li>--%>
<%--                        <a href="#0">--%>
<%--                            <i class="fab fa-google"></i>--%>
<%--                        </a>--%>
<%--                    </li>--%>
<%--                </ul>--%>
                    <ul class="social-icons">
                        <li>
                        <span id="alipay-btn" style="cursor: pointer">
                            <svg t="1620357086996" class="icon" viewBox="0 0 1025 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="4396" width="35" height="35">
                                <path d="M0.511478 512.521963c1.534434 280.289964 230.165116 505.851778 510.455081 504.828823s506.363256-229.14216 505.851778-508.920647C1015.795381 227.628697 788.699133 1.043927 508.409168 1.043927 227.096248 2.066883-0.511478 230.697565 0.511478 512.521963z"
                                      fill="#FFFFFF" p-id="4397"></path>
                                <path d="M892.017696 775.933152c-30.177204-21.993556-177.994357-109.967778-295.634305-168.787752-36.826419 50.124848-77.233184 97.692305-114.57108 119.685861 0 0-45.010067 23.52799-99.22674 28.131292-136.053158 11.252517-215.332253-133.495768-135.541679-219.424078 0 0 68.538057-86.439788 234.256941-29.154248 27.108336 9.206605 57.28554 20.9706 89.508656 34.780506 36.826419-59.331452 56.774062-107.921866 56.774062-107.921865h-296.657261c-13.298429 0-24.039468-10.741039-24.039468-24.039468s10.741039-24.039468 24.039468-24.039468h158.046713v-42.452677h-209.705995c-13.298429 0-24.039468-10.741039-24.039468-24.039468s10.741039-24.039468 24.039468-24.039467h209.705995V221.49096c0-13.298429 10.741039-24.039468 24.039468-24.039467s24.039468 10.741039 24.039467 24.039467v73.14136h209.705996c13.298429 0 24.039468 10.741039 24.039467 24.039467s-10.741039 24.039468-24.039467 24.039468h-209.705996V384.652454h147.817153a24.013894 24.013894 0 0 1 21.482078 34.780507c-0.511478 1.022956-1.022956 2.045912-1.534434 2.55739-4.091824 8.695127-36.826419 73.141359-80.81353 142.190894 106.387432 50.636326 219.935556 114.57108 294.611349 162.650016l42.964155 27.108336 17.901731-30.688683c29.665726-65.469189 45.010067-137.076114 45.010067-209.194517C1023.979029 229.163131 792.790957-2.53642 506.874734 0.020971 231.188073 2.578361 5.11478 226.605741 0.511478 502.292403-4.091824 788.720103 225.050336 1021.954088 509.943603 1022.977044c168.276274 0.511478 325.811509-81.325008 421.96938-218.9126-10.229561-7.160693-24.550946-17.390253-39.895287-28.131292z"
                                      fill="#4390ED" p-id="4398"></path>
                                <path d="M277.221096 657.270248c9.718083 25.573902 29.665726 38.872331 52.17076 44.498589 102.807085 25.062424 157.535235-40.406765 210.728951-114.57108l3.068868-4.603303c-55.751106-25.573902-105.875954-43.987111-137.587592-47.055979-81.836486-8.695127-161.62706 17.390253-128.380987 121.731773z"
                                      fill="#4390ED" p-id="4399"></path>
                            </svg>

                        </span>
                        </li>
                    </ul>
            </div>
        </div>
    </div>
</section>
<!-- ==========Sign-In-Section========== -->

<script src="../imgs/plugins/layui/layui.js"></script>
<script src="../imgs/js/jquery-3.3.1.min.js"></script>
<script src="../imgs/js/modernizr-3.6.0.min.js"></script>
<script src="../imgs/js/plugins.js"></script>
<script src="../imgs/js/bootstrap.min.js"></script>
<script src="../imgs/js/isotope.pkgd.min.js"></script>
<script src="../imgs/js/magnific-popup.min.js"></script>
<script src="../imgs/js/owl.carousel.min.js"></script>
<script src="../imgs/js/wow.min.js"></script>
<script src="../imgs/js/countdown.min.js"></script>
<script src="../imgs/js/odometer.min.js"></script>
<script src="../imgs/js/viewport.jquery.js"></script>
<script src="../imgs/js/nice-select.js"></script>
<script src="../imgs/js/main.js"></script>
<script>
    //校验手机号格式
    function check_phone(){
        let phone = $("#phone").val();
        let $phone = $("#p_error");
        if(!(/^1[3456789]\d{9}$/.test(phone))){
            $phone.addClass("text-danger").text("× 手机号不合法，请重新输入");
            return false;
        }else{
            $phone.removeClass("text-danger").text("");
        }
        return true;
    }

    //校验密码
    function check_pwd(){
        let pwd = $("#pwd").val();
        let $pwd = $("#pwd_error");
        if(null == pwd||pwd.trim().length==0){
            $pwd.addClass("text-danger").text("× 密码不能为空，请重新输入");
            return false;
        }else {
            $pwd.removeClass("text-danger").text("");
        }
        return true;
    }


    $("#log_btn").on("click",function (){
        if(!check_phone()||!check_pwd()){
            return false;
        }
        let $phone = $("#p_error");
        let phone = $("#phone").val();
        let pwd = $("#pwd").val()
        let send_data = {"phone":phone,"password":pwd};
        console.log(send_data);
        $.ajax({
            type: "POST",  //方法类型
            dataType: "json",  //服务器返回的数据类型
            url:"${path}/user/login" ,
            data: send_data,
            success: function (result) {
                console.log(result);//打印服务端返回的数据(调试用)
                if (result.code == "200") {
                    $phone.removeClass("text-danger").text("");
                    //判断是否选择记住密码
                    if($("#bal2").prop("checked")){
                        localStorage.setItem("phone",phone);
                        localStorage.setItem("password",pwd);
                    }else {
                        localStorage.clear();
                    }
                    layui.use('layer', function(){
                        let layer = layui.layer;
                        layer.msg('<span style="font-weight:bold;color: black">登录成功！</span>', {icon:1,time: 2000 },function (){
                            //跳转到主页
                            window.location = "${path}/index/movie";
                        });
                    });
                }

                else {
                    $phone.addClass("text-danger").text("× 手机号或密码错误");
                }
            },
            error : function() {
                alert("登录异常！");
            }
        });
    })

    $(function (){
        let phone = localStorage.getItem("phone");
        let pwd = localStorage.getItem("password");
        if(phone!=null&&pwd!=null){
            $("#bal2").prop("checked",true);
            $("#pwd").val(pwd);
            $("#phone").val(phone);

        }

        $("#alipay-btn").click(function(){
            window.location="/boot/user/alipayLogin";
        })
    })
</script>

</body>

</html>
